<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>19-02-23</title>
  <style>
    ul{
      list-style: none;
    }
    li{
      float: left;
      border: 1px solid #000;
      margin: 10px;
    }
    li img{
      display:block;
    }
    div{
      width: 0%;
      height: 20px;
      background-color: lightcoral;
    }
  </style>
</head>
<body>
  <!--展示图片：-->
<!--src:指定路径(资源定位--url):src请求的是外部文件，一般来说是服务器资源。
    意味着它需要向服务器发送请求，它占用服务器资源-->
<!--<img src="../images/l1.jpg" alt="">-->

<!--需求：即时预览：
    即时：当用户选择完图片之后就立刻进行预览的处理 >>onchange
    预览：通过文件读取对象的readAsDataURL()完成-->

   


    <form action="" enctype="multipart/form-data">
      文件：<input type="file" name="myFile" id="myFile" onchange="getFileContent();" multiple>
      <!-- 进度条 -->
      <div></div>
      <input type="submit">
    </form>
    <!-- 图片展示区域 -->
    <ul id="imgList"></ul>

    <script>

    var div = document.querySelector("div");
    var ul = document.querySelector("#imgList");
      
    function getFileContent(){

      // file[0]就是上传的图片本身
      // FileReader的readAsDataURL方法可以将图片转换为base64格式

      // 1.上传单个文件时： 
      // var reader = new FileReader();
      // var file = document.querySelector("#myFile").files;
      // reader.readAsDataURL(file[0]);
      // // 一定要在文件读取 成功完成时 再进行相应的操作：
      // reader.onload = function(){
      //   document.querySelector("img").src = reader.result;
      // }

      // 上传多个文件时：
      var file = document.querySelector("#myFile").files;
      var totalSize = 0;
      // 限定文件总数不能超过的大小
      var maxSize = 10*1024*1024; 
      for(var i=0;i<file.length;i++){
        totalSize += file[i].size;
        if(file[i].size > maxSize){
          alert("文件不能超过10M")
          return false;
        }else{
          // 调用上传多个图片的方法
          uploadMultiImg(file,i);
        }
      }
    }

    // 上传多个图片的方法：传入 文件 和 每个图片的 index索引
    function uploadMultiImg(file,index){
        var li = document.createElement("li");
        ul.appendChild(li);
        var img = document.createElement("img");
        li.appendChild(img);
        /*1.1 判断是否支持FileReader  并且  创建文件读取对象*/
         if(window.FileReader) {
            var reader = new FileReader();
        } else {
            alert("您的设备不支持图片预览功能，如需该功能请升级您的设备！");
        }
        // 1.2 是否是图片
        var imageType = /^image\//;
        if(!imageType.test(file[index].type)) {
          alert("请选择图片！");
          return;
        }
         /*2.读取文件，获取DataURL
        * 2.1.说明没有任何的返回值:void：但是读取完文件之后，它会将读取的结果存储在文件读取对象的result中
        * 2.2.需要传递一个参数 binary large object:文件(图片或者其它可以嵌入到文档的类型)
        * 2.3:文件存储在file表单元素的files属性中，它是一个数组*/
        reader.readAsDataURL(file[index]);
        /*获取数据*/
        reader.onload = function(){
           /*展示：图片路径设置为读取的图片*/
          img.src = reader.result;
          img.style.width = '200px';
          img.style.height = '200px';
        }

        // 进度条
        reader.onprogress = function(e){
          console.log(e)
          var percent = e.loaded / e.total * 100 + '%';
          div.style.width = percent;
          var number = (e.loaded / e.total * 100).toString().substring(0,5) + '%';
          div.innerText = number;
        }
    }

    </script>
</body>
</html>